<template>
	<view>
		<view class="moment">
			<moment-info :momentInfo="moment.momentInfo"></moment-info>
			<moment-content :content="moment.content"></moment-content>
		</view>
		<moment-comment-list></moment-comment-list>

		<uv-tabbar :value="value" @change="index=>value = index">
			<view class="box">
				<moment-interact class="interact" :interactInfo="moment.interactInfo"></moment-interact>
			</view>
		</uv-tabbar>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const moment = ref({
		momentInfo: {
			avatar: "https://pic1.zhimg.com/v2-da2b0a3b96103d87a682409fc5a261a9_r.jpg?source=1def8aca",
			username: "张三",
			publicTime: "2024年2月3日"
		},
		content: {
			text: "你好，我是张三~",
			imageList: [
				"https://tse4-mm.cn.bing.net/th/id/OIP-C.dOfiKhu91_5AHz-LaXxfMgHaEo?rs=1&pid=ImgDetMain",
				"https://tse4-mm.cn.bing.net/th/id/OIP-C.AwZqdhNoq0qMyOh3iGDWwwHaNK?rs=1&pid=ImgDetMain",
				"https://img.zcool.cn/community/016d5c570cffbf6ac7251f050bf201.jpg@1280w_1l_2o_100sh.jpg",
				"https://img.zcool.cn/community/018f0c5d2408e0a8012137632a1811.png@1280w_1l_2o_100sh.png",
				"https://img.zcool.cn/community/018f0c5d2408e0a8012137632a1811.png@1280w_1l_2o_100sh.png"
			]
		},
		interactInfo:{
			_id: "",
			like_count: 0
		}
	});
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.moment {
		border-radius: 10px;
		padding: 10px;
		background: #ffffff;
		margin: 5px;
	}

	.box {
		margin: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.text {
		font-size: 24rpx;
	}

	.interact {
		width: 100%;
	}
</style>